<template>
<div class="my-tag">
    <input 
    v-if="isShow"
    v-focus
    :value="value"
    class="input"
    type="text"
    placeholder="输入标签"
    @blur="isShow=false"
    @keyup.enter="changeTag"/>
    <div class="text" v-else @dblclick="isShow=true">
        {{ value }}
    </div>

</div>
  </template>
  
  <script>
  export default {
  props:{
    value:String
  },
  data(){
    return{
        isShow:false
    }
  },
  methods:{
    changeTag(e){
        if(e.target.value.trim()=== ''){
            alert('请输入修改内容')
            return
        }
        // 让输入框隐藏
        this.isShow = false
        // 修改父组件数据
        this.$emit('input',e.target.value)
    }
  }
  }
  </script>
  
  <style scoped>

  </style>